<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Title</title>
    <link rel="stylesheet" href="../css/v3icon.css">
    <script>
        $('.dropdown-toggle').dropdown('toggle')
    </script>
</head>
<body>
    <header class="head">
        <img src="../img/share_logo.png">
        <div class="head-nav quick-menu">
            <ul class="clearfix">
                <li class="lists"><a href="#">数据库</a></li>
                <li class="lists"><a href="#">icon图标库</a></li>
            </ul>
        </div>
    </header>
    <div class="top">
        <div class="title">icon 图标库</div>
        <div class="search-fields">
            <form>
                <div>
                   <input type="text" placeholder="搜索图标" class="search-input">
                </div>
                <div>
                   <button class="search-bottom">搜索</button>
                </div>
            </form>
        </div>
    </div>
    <div class="top-nav">
        <div class="dropdown clearfix">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu-active" data-toggle="dropdown" aria-expanded="true">
                像素
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu-active">
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">24px</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">32px</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">48px</a></li>
            </ul>
        </div>
    </div>
    <div class="content-size">
        <ul class="d-table ic-list">
            <li class="d-table-cell">
                <div class="icon-logos">&#xf5f1;</div>
                <div class="ic-name">icon-v1</div>
                <div class="ic-name">f5f1</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf5f2;</div>
                <div class="ic-name">icon-v2</div>
                <div class="ic-name">f5f2</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf5f3;</div>
                <div class="ic-name">icon-v3</div>
                <div class="ic-name">f5f3</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf5f4;</div>
                <div class="ic-name">icon-v4</div>
                <div class="ic-name">f5f4</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf5f5;</div>
                <div class="ic-name">icon-v5</div>
                <div class="ic-name">f5f5</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf5f6;</div>
                <div class="ic-name">icon-v6</div>
                <div class="ic-name">f5f6</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf5f7;</div>
                <div class="ic-name">icon-v7</div>
                <div class="ic-name">f5f7</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf5f8;</div>
                <div class="ic-name">icon-v8</div>
                <div class="ic-name">f5f8</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf5f9;</div>
                <div class="ic-name">icon-v9</div>
                <div class="ic-name">f5f9</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf5fa;</div>
                <div class="ic-name">icon-qrcode</div>
                <div class="ic-name">f5fa</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf5fb;</div>
                <div class="ic-name">icon-agency</div>
                <div class="ic-name">f5fb</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf5fc;</div>
                <div class="ic-name">icon-all-commodity</div>
                <div class="ic-name">f5fc</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf5fd;</div>
                <div class="ic-name">icon-attention-beg</div>
                <div class="ic-name">f5fd</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf5fe;</div>
                <div class="ic-name">icon-attention-end</div>
                <div class="ic-name">f5fe</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf5ff;</div>
                <div class="ic-name">icon-left</div>
                <div class="ic-name">f5ff</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf600;</div>
                <div class="ic-name">icon-up</div>
                <div class="ic-name">f600</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf601;</div>
                <div class="ic-name">icon-below</div>
                <div class="ic-name">f601</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf602;</div>
                <div class="ic-name">icon-right</div>
                <div class="ic-name">f602</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf603;</div>
                <div class="ic-name">icon-cart</div>
                <div class="ic-name">f603</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf604;</div>
                <div class="ic-name">icon-cart-end</div>
                <div class="ic-name">f604</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf605;</div>
                <div class="ic-name">icon-circle</div>
                <div class="ic-name">f605</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf606;</div>
                <div class="ic-name">icon-collect-beg</div>
                <div class="ic-name">f606</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf607;</div>
                <div class="ic-name">icon-collect-end</div>
                <div class="ic-name">f607</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf608;</div>
                <div class="ic-name">icon-delete</div>
                <div class="ic-name">f608</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf609;</div>
                <div class="ic-name">icon-delete-end</div>
                <div class="ic-name">f609</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf60a;</div>
                <div class="ic-name">icon-express</div>
                <div class="ic-name">f60a</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf60b;</div>
                <div class="ic-name">icon-home</div>
                <div class="ic-name">f60b</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf60c;</div>
                <div class="ic-name">icon-home-end</div>
                <div class="ic-name">f60c</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf60d;</div>
                <div class="ic-name">icon-logo</div>
                <div class="ic-name">f60d</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf60e;</div>
                <div class="ic-name">icon-masonry</div>
                <div class="ic-name">f60e</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf60f;</div>
                <div class="ic-name">icon-me</div>
                <div class="ic-name">f60f</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf610;</div>
                <div class="ic-name">icon-me-end</div>
                <div class="ic-name">f610</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf611;</div>
                <div class="ic-name">icon-more</div>
                <div class="ic-name">f611</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf612;</div>
                <div class="ic-name">icon-tixianxia</div>
                <div class="ic-name">f612</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf613;</div>
                <div class="ic-name">icon-envelope</div>
                <div class="ic-name">f613</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf614;</div>
                <div class="ic-name">icon-img</div>
                <div class="ic-name">f614</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf615;</div>
                <div class="ic-name">icon-search</div>
                <div class="ic-name">f615</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf616;</div>
                <div class="ic-name">icon-select</div>
                <div class="ic-name">f616</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf617;</div>
                <div class="ic-name">icon-select-end</div>
                <div class="ic-name">f617</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf618;</div>
                <div class="ic-name">icon-shop</div>
                <div class="ic-name">f618</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf619;</div>
                <div class="ic-name">icon-shop-end</div>
                <div class="ic-name">f619</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf61a;</div>
                <div class="ic-name">icon-check</div>
                <div class="ic-name">f61a</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf61b;</div>
                <div class="ic-name">icon-add</div>
                <div class="ic-name">f61b</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf61c;</div>
                <div class="ic-name">icon-subtract</div>
                <div class="ic-name">f61c</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf61d;</div>
                <div class="ic-name">icon-haoyouyaoqing</div>
                <div class="ic-name">f61d</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf61e;</div>
                <div class="ic-name">icon-moreandroid</div>
                <div class="ic-name">f61e</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf61f;</div>
                <div class="ic-name">icon-service</div>
                <div class="ic-name">f61f</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf620;</div>
                <div class="ic-name">icon-share</div>
                <div class="ic-name">f620</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf621;</div>
                <div class="ic-name">icon-alarm-clock</div>
                <div class="ic-name">f621</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf622;</div>
                <div class="ic-name">icon-info</div>
                <div class="ic-name">f622</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf623;</div>
                <div class="ic-name">icon-infofill</div>
                <div class="ic-name">f623</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf624;</div>
                <div class="ic-name">icon-close</div>
                <div class="ic-name">f624</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf625;</div>
                <div class="ic-name">icon-location</div>
                <div class="ic-name">f625</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf626;</div>
                <div class="ic-name">icon-weixin</div>
                <div class="ic-name">f626</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf627;</div>
                <div class="ic-name">icon-copy</div>
                <div class="ic-name">f627</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf628;</div>
                <div class="ic-name">icon-send-out</div>
                <div class="ic-name">f628</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf629;</div>
                <div class="ic-name">icon-payment</div>
                <div class="ic-name">f629</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf62a;</div>
                <div class="ic-name">icon-refund</div>
                <div class="ic-name">f62a</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf62b;</div>
                <div class="ic-name">icon-good</div>
                <div class="ic-name">f62b</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf62c;</div>
                <div class="ic-name">icon-my</div>
                <div class="ic-name">f62c</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf62d;</div>
                <div class="ic-name">icon-my-end</div>
                <div class="ic-name">f62d</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf62e;</div>
                <div class="ic-name">icon-comment</div>
                <div class="ic-name">f62e</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf62f;</div>
                <div class="ic-name">icon-site</div>
                <div class="ic-name">f62f</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf630;</div>
                <div class="ic-name">icon-form</div>
                <div class="ic-name">f630</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf631;</div>
                <div class="ic-name">icon-new</div>
                <div class="ic-name">f631</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf632;</div>
                <div class="ic-name">icon-sort</div>
                <div class="ic-name">f632</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf633;</div>
                <div class="ic-name">icon-photo</div>
                <div class="ic-name">f633</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf634;</div>
                <div class="ic-name">icon-down</div>
                <div class="ic-name">f634</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf635;</div>
                <div class="ic-name">icon-redpacket</div>
                <div class="ic-name">f635</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf636;</div>
                <div class="ic-name">icon-tel</div>
                <div class="ic-name">f636</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf637;</div>
                <div class="ic-name">icon-recharge</div>
                <div class="ic-name">f637</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf638;</div>
                <div class="ic-name">icon-preview</div>
                <div class="ic-name">f638</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf639;</div>
                <div class="ic-name">icon-stat</div>
                <div class="ic-name">f639</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf63a;</div>
                <div class="ic-name">icon-stat-end</div>
                <div class="ic-name">f63a</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf63b;</div>
                <div class="ic-name">icon-link</div>
                <div class="ic-name">f63b</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf63c;</div>
                <div class="ic-name">icon-invite</div>
                <div class="ic-name">f63c</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf63d;</div>
                <div class="ic-name">icon-horn</div>
                <div class="ic-name">f63d</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf63e;</div>
                <div class="ic-name">icon-location-end</div>
                <div class="ic-name">f63e</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf63f;</div>
                <div class="ic-name">icon-approve</div>
                <div class="ic-name">f63f</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf640;</div>
                <div class="ic-name">icon-list</div>
                <div class="ic-name">f640</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf641;</div>
                <div class="ic-name">icon-qq</div>
                <div class="ic-name">f641</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf642;</div>
                <div class="ic-name">icon-indent</div>
                <div class="ic-name">f642</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf643;</div>
                <div class="ic-name">icon-question</div>
                <div class="ic-name">f643</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf644;</div>
                <div class="ic-name">icon-finish</div>
                <div class="ic-name">f644</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf645;</div>
                <div class="ic-name">icon-question-end</div>
                <div class="ic-name">f645</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf646;</div>
                <div class="ic-name">icon-emoji</div>
                <div class="ic-name">f646</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf647;</div>
                <div class="ic-name">icon-assure</div>
                <div class="ic-name">f647</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf648;</div>
                <div class="ic-name">icon-community</div>
                <div class="ic-name">f648</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf649;</div>
                <div class="ic-name">icon-community-end</div>
                <div class="ic-name">f649</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf64a;</div>
                <div class="ic-name">icon-ciconfont</div>
                <div class="ic-name">f64a</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf64b;</div>
                <div class="ic-name">icon-details</div>
                <div class="ic-name">f64b</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf64c;</div>
                <div class="ic-name">icon-top</div>
                <div class="ic-name">f64c</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf64d;</div>
                <div class="ic-name">icon-friend</div>
                <div class="ic-name">f64d</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf64e;</div>
                <div class="ic-name">icon-settings</div>
                <div class="ic-name">f64e</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf64f;</div>
                <div class="ic-name">icon-space</div>
                <div class="ic-name">f64f</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf650;</div>
                <div class="ic-name">icon-weibo</div>
                <div class="ic-name">f650</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf651;</div>
                <div class="ic-name">icon-tengxun</div>
                <div class="ic-name">f651</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf652;</div>
                <div class="ic-name">icon-college</div>
                <div class="ic-name">f652</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf653;</div>
                <div class="ic-name">icon-bank</div>
                <div class="ic-name">f653</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf654;</div>
                <div class="ic-name">icon-bbs</div>
                <div class="ic-name">f654</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf655;</div>
                <div class="ic-name">icon-batch</div>
                <div class="ic-name">f655</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf656;</div>
                <div class="ic-name">icon-add-good</div>
                <div class="ic-name">f656</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf657;</div>
                <div class="ic-name">icon-yard</div>
                <div class="ic-name">f657</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf658;</div>
                <div class="ic-name">icon-coupon-code</div>
                <div class="ic-name">f658</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf659;</div>
                <div class="ic-name">icon-putaway</div>
                <div class="ic-name">f659</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf65a;</div>
                <div class="ic-name">icon-footprint</div>
                <div class="ic-name">f65a</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf65b;</div>
                <div class="ic-name">icon-withdraw</div>
                <div class="ic-name">f65b</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf65c;</div>
                <div class="ic-name">icon-renwu</div>
                <div class="ic-name">f65c</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf65d;</div>
                <div class="ic-name">icon-review</div>
                <div class="ic-name">f65d</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf65e;</div>
                <div class="ic-name">icon-edit</div>
                <div class="ic-name">f65e</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf65f;</div>
                <div class="ic-name">icon-text-search</div>
                <div class="ic-name">f65f</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf660;</div>
                <div class="ic-name">icon-partnership</div>
                <div class="ic-name">f660</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf661;</div>
                <div class="ic-name">icon-partnership-end</div>
                <div class="ic-name">f661</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf662;</div>
                <div class="ic-name">icon-home2</div>
                <div class="ic-name">f662</div>
            </li>
            <li class="d-table-cell">
                <div class="icon-logos">&#xf663;</div>
                <div class="ic-name">icon-home-end2</div>
                <div class="ic-name">f663</div>
            </li>
        </ul>
    </div>
</body>
</html>